<template>
  <a-card style="position: relative">
    <a-row :gutter="12">
      <a-col :span="24">
        <a-steps style="padding: 20px 0" :current="current" @change="onChangeSteps">
          <a-step title="数据源选择" description="" />
          <a-step title="界面配置" description="" />
          <a-step title="查询项配置" description="" />
          <a-step title="完成配置" description="" />
        </a-steps>
      </a-col>
      <a-col :span="6">
        <LeftTree ref="leftTree" @selected="getTreeData"></LeftTree>
      </a-col>
      <a-col :span="18">
        <!-- 查询区域 -->
        <div class="table-page-search-wrapper" style="padding-bottom: 10px">
          <a-row :gutter="24">
            <a-col style="width: 7%; line-height: 32px" :md="2" :sm="2"> 模型配置: </a-col>
            <a-col :md="6" :sm="8">
              <a-tree-select
                v-model="selectedData"
                style="width: 100%"
                :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                placeholder="请选择"
                :tree-data="selectData"
                allow-clear
                @select="onSelectModal"
              />
            </a-col>
          </a-row>
        </div>
        <a-table
          ref="table"
          size="middle"
          bordered
          rowKey="id"
          :columns="columns"
          :dataSource="dataSource"
          :pagination="ipagination"
          :loading="loading"
          @change="handleTableChange"
        >
          <span slot="fieldCnName" slot-scope="text, record">
            <editable-cell
              :text="text"
              v-model="record['fieldCnName']"
              @change="onCellChange(record, 'fieldCnName', $event)"
            />
          </span>
          <span slot="isMenu" slot-scope="text, record">
            <!-- <a-radio-group v-model="record.isMenu" @change="() => onChangeRadioIsMenu(record)">
              <a-radio :value="'1'"> 是 </a-radio>
              <a-radio :value="'2'"> 否 </a-radio>
            </a-radio-group> -->
            <a-switch
              :checked="record.isMenu === '1'"
              checked-children="是"
              un-checked-children="否"
              @change="
                (value) => {
                  record.isMenu = value ? '1' : '2'
                  onChangeRadioIsMenu(record)
                }
              "
            />
          </span>
          <span slot="isSearch" slot-scope="text, record">
            <!-- <a-radio-group v-model="record.isSearch" @change="() => onChangeRadioIsSearch(record)">
              <a-radio :value="'1'"> 是 </a-radio>
              <a-radio :value="'2'"> 否 </a-radio>
            </a-radio-group> -->
            <a-switch
              :checked="record.isSearch === '1'"
              checked-children="是"
              un-checked-children="否"
              @change="
                (value) => {
                  record.isSearch = value ? '1' : '2'
                  onChangeRadioIsMenu(record)
                }
              "
            />
          </span>
        </a-table>
      </a-col>
    </a-row>
  </a-card>
</template>

<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import columns from './indexColumns'
import LeftTree from './LeftTree'
import EditableCell from './EditableCell.vue'
import { httpAction, getAction, postAction } from '@/api/manage'

export default {
  props: ['id', 'type'],
  name: 'mxsjdy',
  components: {
    LeftTree,
    EditableCell,
  },
  mixins: [JeecgListMixin],
  data() {
    return {
      queryParam: {
        sourceId: '',
        modelId: '',
      },
      selectedData: '',
      radioValue: '',
      columns: columns(this),
      url: {
        list: '/dataModel/queryFieldInfoList',
        select: '/dataModel/querySourceInfoList',
        save: '/dataModel/saveModelConfig',
      },
      current: 0,
      selectData: [],
      disableMixinCreated: true,
    }
  },
  created() {},
  methods: {
    onCellChange(record, dataIndex, value) {
      record[dataIndex] = value
      this.onChangeRadioIsSearch(record)
    },
    onChange(checked) {
      console.log(checked)
    },
    OnDownLoad(data) {},
    onChangeSteps(current) {
      console.log('onChangeSteps:', current)
      // this.current = current;
    },
    onSelectModal(value) {
      this.current = 2
      this.queryParam.sourceId = value
      this.loadData(1)
    },
    onChangeRadioIsMenu(record) {
      this.current = 3
      record.modelId = this.queryParam.modelId
      postAction(this.url.save, record).then((res) => {
        if (res.success) {
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    onChangeRadioIsSearch(record) {
      this.current = 3
      record.modelId = this.queryParam.modelId
      postAction(this.url.save, record).then((res) => {
        if (res.success) {
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    getTreeData(data) {
      this.current = 1
      console.log(111, data)
      this.queryParam.modelId = data
      this.selectedData = ''
      this.getSelectList(data)
      // this.title = data.itemName
      // this.queryParam.id = data.id
      // this.loadData()
    },
    getSelectList(id) {
      this.selectData = []
      this.dataSource = []
      this.ipagination = Object.assign({}, this.$options.data().ipagination)
      getAction(this.url.select, { modelId: id }).then((res) => {
        this.loading = false
        if (res.success) {
          res.result.map((item) => {
            this.selectData.push({
              id: item.id,
              value: item.id,
              pid: item.pid,
              title: item.tableCnName,
            })
          })
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    saveModal(id) {
      this.selectData = []
    },
  },
}
</script>

<style scoped>
</style>